﻿@{
    Layout = "~/Views/Shared/_Form.cshtml";
}
<style>
    .flex-container {
        display: flex;
        align-items: center;
    }
    .form-control {
        background-color: #FAFAD2;
    }
</style>
<form id="form" class="form-horizontal m" role="form"> 
</form>
<script>
    var projectId = frame.request("projectId");
    var saleRMBAmountAfterTax = 0, profit = 0;
    $(function () {
        frame.ajax({
            url: '@Url.Action("GetOperateCostJson", "Project")' + '?projectId=' + projectId,
            type: 'get',
            success: function (obj) {
                if (obj.success) {
                    console.log(obj.data)
                    saleRMBAmountAfterTax = obj.data.SaleRMBAmountAfterTax;
                    profit = obj.data.Profit;
                    renderDataRow(obj.data.ProjectOperateCosts)
                }
            }
        })
    })

    function renderDataRow(data) {
        var html = [];
        $.each(data, function (index) {
            var readonly = '';
            var defaultVal = 0; 
            if (data[index].IsDefault) { readonly = "readonly"; defaultVal = 1; }
            if (index == 0) {
                html.push("<div class=\"form-group flex-container\">");
                html.push("<div class=\"col-sm-5\">");
                html.push(`<input type=\"text\" class=\"form-control\" value="${data[index].Name}" name="NAME" ${readonly}/>`);
                html.push("</div>"); 
                html.push("<div class=\"col-sm-6\">");
                html.push(`<input type=\"number\" class=\"form-control\" min=\"0\" value="${data[index].Amount}" name="AMOUNT"/>`);
                html.push("</div>"); 
                html.push("<div class=\"col-sm-1\">");
                html.push("<a class=\"fa fa-plus-circle fa-lg text-blue\" onclick=\"addRow($(this))\"  href=\"javascript:void(0);\"></a>");
                html.push("</div>");
                html.push("<input type=\"hidden\" name=\"IsDefault\" value=\"" + defaultVal + "\"/>");
                html.push("<input type=\"hidden\" name=\"Code\" value=\"" + (data[index].Code ?? "") + "\"/>");
                html.push("</div>");
            }
            else {
                if (data[index].IsDefault) { 
                    html.push("<div class=\"form-group flex-container\">");
                    html.push("<div class=\"col-sm-5\">");
                    html.push(`<input type=\"text\" class=\"form-control\" value="${data[index].Name}" name="NAME" ${readonly}/>`);
                    html.push("</div>");
                    html.push("<div class=\"col-sm-3 flex-container\">");
                    html.push(`<input type=\"number\" class=\"form-control\" min=\"0\" value="${data[index].Rate}" name="RATE" placeholder="输入数字" oninput="inputEvent($(this),'${data[index].Code}')"/>%`);
                    html.push("</div>");
                    html.push("<div class=\"col-sm-3\">");
                    html.push(`<input type=\"number\" class=\"form-control\" min=\"0\" value="${data[index].Amount}" name="AMOUNT" ${readonly} />`);
                    html.push("</div>"); 
                    html.push("<input type=\"hidden\" name=\"IsDefault\" value=\"" + defaultVal + "\"/>");
                    html.push("<input type=\"hidden\" name=\"Code\" value=\"" + (data[index].Code ?? "") + "\"/>");
                    html.push("</div>");
                } 
                else {
                    html.push("<div class=\"form-group flex-container\">");
                    html.push("<div class=\"col-sm-5\">");
                    html.push(`<input type=\"text\" class=\"form-control\" value="${data[index].Name}" name="NAME" />`);
                    html.push("</div>"); 
                    html.push("<div class=\"col-sm-6\">");
                    html.push(`<input type=\"number\" class=\"form-control\" min=\"0\" value="${data[index].Amount}" name="AMOUNT" />`);
                    html.push("</div>");
                    html.push("<div class=\"col-sm-1\">");
                    html.push("<a class=\"fa fa-minus-circle fa-lg text-red\" onclick=\"delRow($(this))\"  href=\"javascript:void(0);\"></a>");
                    html.push("</div>");
                    html.push("<input type=\"hidden\" name=\"IsDefault\" value=\"" + defaultVal + "\"/>");
                    html.push("<input type=\"hidden\" name=\"Code\" value=\"" + (data[index].Code ?? "") + "\"/>");
                    html.push("</div>");
                } 
            }
        });
        $('#form').append(html.join(''));
        $('form>div').find('input[name=RATE]').trigger('input');
    }

    function addRow() {
        var html = [];
        html.push("<div class=\"form-group flex-container\">");
        html.push("<div class=\"col-sm-5\">");
        html.push(`<input type=\"text\" class=\"form-control\" value="" placeholder="成本名称" name="NAME" />`);
        html.push("</div>"); 
        html.push("<div class=\"col-sm-6\">");
        html.push(`<input type=\"number\" class=\"form-control\" min=\"0\" value="" placeholder="成本费用" name="AMOUNT" />`);
        html.push("</div>");
        html.push("<div class=\"col-sm-1\">");
        html.push("<a class=\"fa fa-minus-circle fa-lg text-red\" onclick=\"delRow($(this))\"  href=\"javascript:void(0);\"></a>");
        html.push("</div>");
        html.push("<input type=\"hidden\" name=\"IsDefault\" value=\"0\"/>");
        html.push("<input type=\"hidden\" name=\"Code\" />");
        html.push("</div>");
        $('#form').append(html.join(''));
    }

    function delRow($this) {
        $this.parent().parent().remove();
    }

    function saveOperateCost(index) {
        var postData = { projectId };
        var items = [];
        $('form>div').each(function () { 
            var name = $(this).find('input[name=NAME]').val();
            var rate = $(this).find('input[name=RATE]').val();
            var amount = $(this).find('input[name=AMOUNT]').val();
            if (!!name && !!amount) {
                items.push({
                    projectId,
                    name,
                    amount,
                    rate,
                    Code: $(this).find('input[name=Code]').val(),
                    IsDefault: !!parseInt($(this).find('input[name=IsDefault]').val())
                }) 
            } 
        })
        postData.OperateCostItems = items;  
        frame.ajax({
            url: '@Url.Action("SaveOperateCostJson", "Project")',
            type: 'post',
            data: postData,
            success: function (obj) {
                if (obj.success) {
                    frame.msgSuccess(obj.message);
                    parent.searchGrid();
                    parent.layer.close(index);
                }
                else {
                    frame.msgError(obj.message);
                }
            }
        });
    } 

    function inputEvent($this, code) { 
        var rate = !!$this.val() ? parseFloat($this.val()) : 0;
        switch (code) {
            case "TaxRate":
                $this.parent().parent().find('input[name=AMOUNT]').val((saleRMBAmountAfterTax * rate * 0.01).toFixed(2));
                break; 
            case "ProfitRate":
                $this.parent().parent().find('input[name=AMOUNT]').val((profit * rate * 0.01).toFixed(2));
                break; 
        }
    }
</script>